<template>
  <wing-blank class="home-banners">
    <van-swipe :height="140">
      <van-swipe-item v-for="banner in banners" :key="banner.id"
                      @click="handleRouteBanner(banner)">
        <van-image :src="banner.imageUrl"/>
      </van-swipe-item>
    </van-swipe>
  </wing-blank>
</template>

<script>
import { Image, Swipe, SwipeItem } from "vant"
import { marketing } from "@mall/api-services"
import WingBlank from "@/components/WingBlank"

export default {
  name: "HomeBanners",
  components: {
    WingBlank,
    [Image.name]: Image,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      banners: [],
    }
  },
  created() {
    this.refreshBanners()
  },
  methods: {
    refreshBanners() {
      marketing.BannerServiceV1
          .getBanners()
          .list()
          .then(pagedBanners => this.banners = pagedBanners.elements)
    },
    handleRouteBanner(banner) {
      const { url } = banner
      if (url) {
        this.$router.push(url)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home-banners {
  .van-swipe-item {
    ::v-deep img {
      width: 100%;
      height: 140px;
      vertical-align: top;
      border-radius: 10px;
    }
  }
}
</style>
